<template>
    <!-- 我喜欢 -->
    <div class="title">
        <div class="songs">
            <span>歌曲</span> ||
            <span>歌单</span>
        </div>
        <div class="but">
            <div @click="playAll">全部播放</div>
        </div>
        <div class="content">
            <!-- <el-table :data="songData" stripe style="width: 100%">
                <el-table-column prop="songName" label="歌曲" width="600">
                </el-table-column>
                <el-table-column prop="singerName" label="歌手" width="400">
                </el-table-column>
                <el-table-column prop="address" label="时长" width="">
                </el-table-column>
            </el-table> -->
            <el-table :data="songData" stripe highlight-current-row>
                <el-table-column type="index" :index="indexMethod" width="80">
                </el-table-column>
                <el-table-column prop="songName" label="歌曲" width="320">
                </el-table-column>
                <el-table-column prop="singerName" label="歌手" width="300">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="favorites(scope.$index, scope.row)">
                            取消收藏
                        </el-button>
                        <el-button size="mini" @click="play(scope.$index, scope.row)">
                            播放
                        </el-button>
                    </template>
                </el-table-column>
                <el-table-column prop="time" label="时长">
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
    data() {
        return {
            songList: null,
            songData: null
        }
    },
    components: {
    },
    computed: {
        ...mapState("user", ["user"])
    },
    methods: {
        ...mapMutations("user", ["userDel"]),
        indexMethod(index) {
            return index + 1;
        },
        favorites: function (index, row) {
            this.axios({
                url: "/api/users/songCancel",
                params: {
                    userID: this.user.userID,
                    songID: row.songsID
                }
            }).then(res => {
                if (res.data.code == 200) {
                    this.$message({
                        message: "取消收藏成功",
                        type: 'success'
                    });
                    for (const i in this.songData) {
                        if (this.songData[i].songsID == row.songsID) {
                            this.songData.splice(i, 1)
                        }
                    }
                }
                // console.log(res.data);
            }).catch(err => {
                console.log(err);
            })
            // console.log(row);
            // console.log(this.user.userID);
        },
        play() {
            console.log("点击");
        },
        playAll: function () {
            let arr = []
            this.songData.forEach(i => {
                arr.unshift(i)
            });
            arr.forEach(x => {
                let song = {
                    name: x.songName,
                    artist: x.singerName,
                    url: '/api/' + x.url,
                    cover: '/api/' + x.imgUrl,
                    lrc: x.songWord,
                    songsId: x.songsID,
                    time: x.time
                };
                for (const i in this.$audio) {
                    if (this.$audio[i].songsId == x.songsID) {
                        this.$audio.splice(i, 1);
                        break;
                    }
                }
                this.$audio.unshift(song)
            });
            // console.log(this.$audio);
            this.$router.push("/music")
            // this.$audio = 
        },
    },
    created: function () {
        this.axios({
            url: '/api/users/songLikes',
            params: {
                userID: this.user.userID
            }
        }).then(res => {
            if (res.data.code == 401) {
                this.userDel()
                this.$message({
                    message: '请先登录',
                    type: 'warning'
                });
                this.$router.push('/');
            }
            // console.log(res.data.data.songLikes);
            this.songData = res.data.data.songLikes
        }).catch(err => {
            console.log(2);
            console.log(err);
        })
    }
};
</script>

<style>
.body .title {
    flex-grow: 1;
}

.body .songs :hover {
    cursor: pointer;
    color: plum;
}

.body .but {
    display: flex;
}

.body .but div {
    padding: 10px;
    background: plum;
    margin: 5px;
}

.body .but div:hover {
    cursor: pointer;
}

.body .content {
    background: papayawhip;
    flex-grow: 1;
}

.body .content td {
    width: 50%;
    flex: 1;
}
</style>